<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="/layui/css/layui.css">
    <link type="text/css" rel="stylesheet" href="/css/regist.css">
    <script src="/layui/layui.js"></script>
    <script src="/jquery/jquery-3.6.0.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <title>注册</title>
</head>
<body>

<div id="main">
    <div id="divhead">
        <p>REGIST</p>
    </div>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
                <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password2" placeholder="请输入密码" autocomplete="off"
                       class="layui-input input-span">
                <i class="layui-icon layui-icon-ok input-span"
                   style="font-size: 30px; color: lightseagreen; display:none"></i>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-block">
                <input type="tel" name="phone" lay-verify="required|phone" atocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" title="男" checked="" value="1" id="on">
                <input type="radio" name="sex" title="女" value="0" id="off">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="btn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button  class="layui-btn" lay-filter="demo1" ><a href="/toLogin"> 立即登录</a></button>
            </div>
        </div>


    </form>
</div>
</body>
<script>
    $(function () {

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

        });

    });


    $(function () {
        $('#form').click(function (e) {
            //禁用表单的默认提交事件
            e.preventDefault();
        })

        $('#btn').on('click', function () {
            reister()
        })
        $('#on').click(function () {
            $('#on').attr('checked', true)
            $('#off').attr('checked', false)
        })

        $('#off').click(function () {
            $('#off').attr('checked', true)
            $('#on').attr('checked', false)
        })

        function reister() {

            // $.post('/toRegister',{},function (response) {
            //     console.log(response)
            // },'json')
            $.ajax({
                url: '/regcheck',
                type: 'post',
                dataType: 'json',
                data: JSON.stringify({
                    username: $('input[name=username]').val(),
                    password: $('input[name=password]').val(),
                    password2: $('input[name=password2]').val(),
                    // sex
                    phone: $('input[name=phone]').val(),
                    email: $('input[name=email]').val(),
                    sex: $('input[name=sex][checked]').val(),
                }),
                contentType: 'application/json;charset=utf-8',
                success: function (response) {
                    if (response.success) {
                        layer.msg(response.msg)
                        location="/toLogin"
                    } else {
                        layer.msg(response.msg)
                        location="/toReg"
                    }
                }
            })

        }

    })


</script>

</html>